<template>
  <div class="supplier-management">
    <div class="header">
      <div class="title">供应商管理</div>
    </div>
    
    <div class="toolbar">
      <div class="left-section">
        <el-button type="primary" @click="handleAdd">新增</el-button>
        <el-button @click="handleImport">导入</el-button>
        
        <div class="search-box">
          <el-input
            v-model="searchQuery"
            placeholder="请输入关键字"
            prefix-icon="el-icon-search"
          />
          <el-button icon="el-icon-setting" />
        </div>
      </div>
    </div>

    <el-table
      :data="supplierList"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="序号" width="80" />
      <el-table-column prop="supplierName" label="供应商名称" />
      <el-table-column prop="level" label="供应商等级" />
      <el-table-column prop="industry" label="所属行业" />
      <el-table-column prop="region" label="所在地区" />
      <el-table-column prop="contact" label="联系人" />
      <el-table-column prop="phone" label="联系电话" />
      <el-table-column prop="status" label="状态" />
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
          <el-button type="text" @click="handleView(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'SupplierManagement',
  data() {
    return {
      searchQuery: '',
      supplierList: [],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      selectedRows: []
    }
  },
  methods: {
    handleAdd() {
      // 处理新增供应商
    },
    handleImport() {
      // 处理导入功能
    },
    handleEdit(row) {
      // 处理编辑功能
    },
    handleDelete(row) {
      this.$confirm('确认删除该供应商?', '提示', {
        type: 'warning'
      }).then(() => {
        this.$message.success('删除成功')
      }).catch(() => {})
    },
    handleView(row) {
      // 处理查看功能
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    fetchData() {
      // 模拟数据
      this.supplierList = Array(10).fill().map((_, index) => ({
        id: index + 1,
        supplierName: '供应商' + (index + 1),
        level: '一级',
        industry: '制造业',
        region: '上海',
        contact: '张三',
        phone: '13800138000',
        status: '正常'
      }))
      this.total = 100
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

<style scoped>
.supplier-management {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.title {
  font-size: 20px;
  font-weight: bold;
}

.toolbar {
  margin-bottom: 20px;
}

.left-section {
  display: flex;
  gap: 10px;
}

.search-box {
  display: inline-flex;
  gap: 10px;
  margin-left: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
}
</style> 